<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Coursity.net</title>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/global.js"></script>
        <script type="text/javascript" src="js/adress_bar.js"></script>
        <style>
            .semanticLi{
            	cursor:pointer;
            	text-decoration: underline;
            }
        </style>
        <script>
 
            $(document).ready(function(){
				
                var cid = $.QueryString['cid'];
                var coursex = '';
                var tmp, tmp2, initiative_name;
				$.post('/Coursity/course/getCourse', {id:cid}, function(result){
                	$('h1').html(result.body.courseName);
               		coursex += '<b>Country</b>: ' + result.body.country + '<br />';
               		coursex += '<b>Certificate</b>: ' + result.body.certificate + '<br />';
               		coursex += '<b>Course Description</b>: ' + result.body.courseDescription + '<br />';
               		coursex += '<b>Estimated Effort:</b>: ' + result.body.estimatedEffort + '<br />';
               		
               		tmp = result.body.initiative.initiativeName;
        			tmp2 = tmp.split('(');
        			initiative_name = tmp2[0];
               		coursex += '<b>Initiative</b>: <a href="search_list.html?cid=1&iid=' + result.body.initiative.id +'">' + initiative_name + '</a><br />';
               		
               		coursex += '<b>Institution</b>: <a href="search_list.html?cid=3&iid=' + result.body.institution.id +'">' + result.body.institution.institutionName + '</a><br />';
               		coursex += '<b>Instructor</b>: <a href="search_list.html?cid=2&iid=' + result.body.instructor.instructorId +'">' + result.body.instructor.instructorName + '</a><br />';
               		coursex += '<b>Languages</b>: ' + result.body.languages + '<br />';
               		coursex += '<b>Length</b>: ' + result.body.length + '<br />';
               		coursex += '<b>Recommended Background</b>: ' + result.body.recommendedBackground + '<br />';
               		coursex += '<b>Starting Date</b>: ' + result.body.startingDate + '<br />';
               		coursex += '<b>TextBook</b>: ' + result.body.textbook + '<br />';
               		
               		
                	$('#course_details').html(coursex);
                }, 'json');	
        			
                $("#addTagButton").click(function() {
                	 
					 $.post('/Coursity/semanticTag/getTags', {text:$('#addTagBox').val()}, function(result){
					        if(!result.status){alert(result.error);}
					        else{
								var div="";
					        	 for(var i=0; i<result.body.length; i++){
					                    div += '<li class="semanticLi">' + result.body[i].name + '[' + result.body[i].notableId + '][' + result.body[i].notableName + ']</li>';
					                }
					        	 $('#addTagBoxDiv').html(div);
					        	 $(".semanticLi").click(function() {
					        		 $('#cloud_of_tags').append("<li>"+$(this).html()+"</li>");
					        		 $(this).remove();
					                });
					        }
					    }, 'json');
					 
					
				
            	});
                
                
                
            });
        </script>
    </head>
    <body>
        <p><a href="index.html"> back to main page</a></p>
        <h1></h1>
        <div id="course_details">
        	    
          
        </div>
        <hr />
        <h2>Cloud of Tags</h2>
        <div id="cloud_of_tags" class="list"></div>
     
        <div id="" class="list"> Add new tag:</div>
        <input type="text" id="addTagBox" />
        <button id="addTagButton"  >Search</button>
        <div id="addTagBoxDiv">
        
        </div>
        <br><br><br><br><br><br><br><br>
            </body>
</html>